<template>
  <!-- 企业实名认证开始 -->
  <view class="safe-area-inset-bottom">
    <view class="agree_jn">
      <!-- 步骤条 -->
      <uni-steps :options="steps" :active="0" active-color="#00a660"></uni-steps>
      <img src="@/static/images/company-account.jpg" style="display: block; margin:30rpx auto;width: 180rpx;"/>
      <h4 style="margin: 0;font-weight: normal;text-indent: 1.5em;">为保证您单位签署的文件结果符合国家法律、法规，贵单位需通过实名认证，认证过程中系统可能会采集如下信息：</h4>
      <ul>
        <li><span class="round"></span>单位名称及统一社会信用代码或工商注册号码</li>
        <li><span class="round"></span>法定代表人姓名及证件号码</li>
        <li><span class="round"></span>经办人姓名及证件号码</li>
        <li><span class="round"></span>电信运营商注册的手机号码（仅手机认证获取）</li>
        <li><span class="round"></span>经办人人脸视频（仅人脸识别证获取）</li>
      </ul>
      <!-- 协议复选框 -->
      <checkbox-group style="margin:25rpx 0 0rpx;" @change="selectPo">
        <label>
          <checkbox value="xieyi" color="#00a660" style="transform:scale(0.6)"/>
          <span style="font-size: 26rpx;">我已阅读并同意</span>
          <a class="a-primary" style="font-size: 26rpx;" @click.stop="privacyPolicy">《认证服务协议》</a>
          <a class="a-primary" style="font-size: 26rpx;" @click.stop="userAgreement">《用户隐私政策》</a>
        </label>
      </checkbox-group>
<!--      <checkbox-group @change="selectFa" style="margin:0rpx 0 25rpx;">-->
<!--        <label>-->
<!--          <checkbox value="face" color="#00a660" style="transform:scale(0.6)"/>-->
<!--          <span style="font-size: 26rpx;">我同意励氪签采集人脸照片用于实名认证</span>-->
<!--        </label>-->
<!--      </checkbox-group>-->
      <!-- 企业账户管理员身份选择 -->
      <p style="margin:20rpx 0 25rpx;">管理员身份选择<span style="font-size:22rpx;color: #999999;">（认证后管理员获得电子签约账户全部权限）</span></p>
      <uni-data-checkbox v-model="managerType" :localdata="managerTypes" style="margin:16rpx 10rpx 0;"/>
      <!-- 企业普通员工填写信息-->
      <uni-forms
          ref="form"
          :model="form"
          :rules="rules"
          label-position="top"
          label-width="300rpx"
          class="show-inform"
          v-if="managerType == 3">
        <uni-forms-item label="管理员姓名:" name="name" required>
          <uni-easyinput type="text" v-model="form.name" placeholder="请输入管理员姓名" color="#00a660"/>
        </uni-forms-item>
        <uni-forms-item label="实名手机号:" name="mobile" required>
          <uni-easyinput v-model="form.mobile" type="number" placeholder="请输入实名手机号"/>
        </uni-forms-item>
      </uni-forms>
    </view>
    <view class="text-row" v-if="managerType == 3">合同经办人待单位认证通过后，再经办合同</view>
    <view style="margin-bottom: 40rpx;">
      <button class="startBtn" size="mini" @click="startBtn">{{ (managerType == 3) ? '立即转交' : '开始认证' }}</button>
    </view>
	
	<!-- 普通员工弹窗 -->
	<uni-popup ref="popup" background-color="#fff" :is-mask-click="false">
	  <view class="popup-content">
	      <view class="authentication_phone">
	      	<i class="iconfont themeColor" style="font-size: 100rpx">&#xe66a;</i>
	      	<p class="msg_gray">您已将单位实名认证业务转交给管理员，系统已将认证链接以短信形式发送至管理员手机。单位实名认证后，您可点击【查询认证结果】，获取单位实名认证状态。</p>
	      	<view class="time-block">
				<!-- {{ form.createTime }} -->
	      		<view>短信发送时间：{{ form.createTime }}</view>
	      		<button @click="againSendMsgForWord" class="back-Btn">重新发送</button>
	      	</view>
	      	<view class="gray-block">
	      		<view>管理员姓名：{{ form.name }}<br>实名手机号：{{form.mobile}}</view>
	      		<button @click="toOpenModifyMobileDialog" class="back-Btn">修改信息</button>
	      	</view>
			<uni-notice-bar text="短链接7日内有效，过期未认证，需重新转交！" style="margin-top: 20rpx;"/>
	      	<!-- 按钮 -->
	      	<view class="footer-Btn">
	      		<button @click="copyLegalSignUrl" class="next-Btn">复制认证链接</button>
	      		<button @click="queryCompanyStatus" class="next-Btn" style="margin-left: 50rpx;">查询认证结果</button>
	      	</view>
	      </view>
	  </view>
	</uni-popup>
	
	
  </view>
</template>

<script>
import {certForword} from "@/api/ec/work/company/companyCertification";
import {againSendMsgForWord, getCertForWordLog} from "../../../api/companyCertification";
import {getCompany} from "../../../api/ec/work/company/company";
export default {
  data() {
    return {
      // 认证步骤
      steps: [{title: '完善单位信息'}, {title: '核验单位信息'}, {title: '实名认证通过'}],
      // 管理员身份选择
      managerTypes: [
        {'value': '1', 'text': '我是单位法定代表人（获得管理员权限）'},
        {'value': '2', 'text': '我是单位授权管理员（获得管理员权限）'},
        {'value': '3', 'text': '我是单位普通员工（请转交单位法定代表人或管理员实名认证)'}
      ],
      // 企业id
      companyId: '',
      // 管理员身份选择 1单位法定代表人 2单位授权代理人 3单位普通员工
      managerType: 0,
      // 协议选择框
      confirmPolicy: '',
      // 企业普通员工填写信息表单
      form: {
        name: "",
        mobile: "",
        createTime: "",
      },
      // 企业普通员工填写信息表单验证
      rules: {
        name: {
          rules: [
            {required: true, errorMessage: "请输入管理员姓名"},
          ]
        },
        mobile: {
          rules: [
            {required: true, errorMessage: "请输入实名手机号"},
            {minLength: 11, maxLength: 11, errorMessage: "手机号长度必须是11位",},
            {minLength: 11, maxLength: 11, errorMessage: "手机号长度必须是11位",},
          ],
        }
      },
    };
  },
  onLoad(option) {
    this.companyId = option.id
    // 查询是否有转交记录
    this.getCertForWordLog(this.companyId);
    // 签署短链接 跳转到企业认证标识
    let signTask = option.signTask;
    if (!!signTask) {
      // 个人认证完成 检测到有签署任务的弹窗
      if (signTask == 1) {
        this.$signTaskDialog({
          isShow: true,
          isShowTitle: true,
          confirmTitle: "恭喜！您已完成个人实名认证！",
          confirmMsg: "系统检测到：您有一个企业签署任务，但您还未完成企业实名认证！",
          confirmBtnText: "知道了，去认证"
        });
      } else {
        this.$signTaskDialog({
          isShow: true,
          isShowTitle: false,
          confirmMsg: "系统检测到：您有一个签署任务，但您还未完成企业实名认证！",
          confirmBtnText: "知道了，去认证"
        });
      }
    }
  },
  methods: {
    // 查询转交记录
    getCertForWordLog(companyId){
      getCertForWordLog(companyId).then(response => {
        let data = response.data;
        if(!!data){
          // 选中转交
          this.managerType = "3";// pc 是整数  h5是字符串？
          this.form.name= data.adminName
          this.form.mobile= data.mobile
          this.form.createTime= data.createTime
          this.form.shortUrl= data.shortUrl;
          this.form.companyName= data.companyName;
          this.$refs.popup.open();
        }
      });
    },
    // 重新发送转交消息
    againSendMsgForWord(){
      againSendMsgForWord(this.form.mobile).then(response => {
        this.$modal.msgSuccess("重新发送短信");
      });
    },
    // 复制认证链接
    copyLegalSignUrl(){
      this.$copyText("贵司" + this.$store.getters.staffInfo.name +"有业务需通过励氪签电子合同平台签署，" + this.form.companyName+"通知您进行单位电子签约账户实名认证，点击认证https://t.lksign.cn/"+this.form.shortUrl).then(
          ()=> {
            this.$modal.msgSuccess("认证链接已复制到剪切板，可粘贴。");
          },
          ()=> {
            this.$modal.msgError("复制失败！");
          }
      );
    },
    // 查询认证结果
    queryCompanyStatus(){
      getCompany(this.companyId).then((response) => {
        let data = response.data;
        // 认证审核成功
        if (data.isCertify == 1) {
          this.$modal.msg("单位实名认证成功！");
        }
        // 认证中
        if (data.isCertify == 0) {
          this.$modal.msg("单位实名认证中，请耐心等待！");
        }
      });
    },
	/** 修改信息 */
	toOpenModifyMobileDialog(){
			  this.$refs.popup.close()
	},  
    /** 协议选择框 认证服务协议 */
    selectPo(e) {
      this.confirmPolicy = e.detail.value[0]
    },
    /** 人脸照片用于实名认证选择 */
    // selectFa(e) {
    //   this.confirmFace = e.detail.value[0]
    // },
    /** 用户协议 */
    privacyPolicy() {
      this.$tab.navigateTo('/pages/common/policy/userAgreement')
    },
    /** 用户隐私政策 */
    userAgreement() {
      this.$tab.navigateTo('/pages/common/policy/privacyPolicy')
    },
    /**开始认证 */
    startBtn() {
      if (this.confirmPolicy == '') {
        this.$modal.msgError("请勾选协议")
        return;
      }
      if (this.managerType == '') {
        this.$modal.msgError("请先选择身份")
        return;
      }
      // 我是企业法定代表人
      if (this.managerType == 1) {
        uni.redirectTo({url: '/pages/authentication/companyRealname/authenticationForLegal?managerType=' + this.managerType + '&id=' + this.companyId});
      }
      // 我是企业授权代理人
      if (this.managerType == 2) {
        uni.redirectTo({url: '/pages/authentication/companyRealname/authenticationForAdmin?managerType=' + this.managerType + '&id=' + this.companyId});
      }
      // 我是企业普通员工
      if (this.managerType == 3) {
        this.$refs.form.validate().then(res => {
          this.form.companyId = this.companyId
          uni.showLoading({title: '加载中...', mask: true});
          certForword(this.form).then(response => {
            uni.hideLoading();
            this.form.createTime = response.data.createTime
			      this.$refs.popup.open('center')
          }).catch(() => {
            uni.hideLoading();
          });
        }).catch(err => {
          return false;
        });
      }
    },
  },
};
</script>

<style lang="scss" scoped>
	::v-deep .uni-noticebar__content-text{
		font-size: 24rpx !important;
	}
	.gray-block {
		background: #f5f3f3;
		padding: 20rpx 20rpx;
		line-height: 40rpx;
		display: flex;
		justify-content: space-between;
		align-items: center;
		text-align: left;
	}
	
	.time-block {
		display: flex;
		justify-content: space-between;
		align-items: center;
		margin: 40rpx auto 10rpx;
	}
	::v-deep .uni-popup .uni-popup__wrapper{
		width: 90%;
	}
	.authentication_phone {
		text-align: center;
		padding: 30rpx 30rpx 20rpx 30rpx;
	
		.msg_gray {
			color: #666;
			font-size: 28rpx;
			margin: 10rpx auto 0;
			text-indent: 1em;
			line-height: 46rpx;
		}
	}
	
	// 认证btn
	.footer-Btn {
		margin: 30rpx 0 20rpx 0;
		display: flex;
		justify-content: center;
	}
	
	button {
		width: auto;
		font-size: 26rpx;
		line-height: 2.3;
	}
	
	.next-Btn {
		background-color: $uni-color-primary;
		color: #fff;
	}
	
	.back-Btn {
		border: solid 1rpx $uni-color-primary;
		color: $uni-color-primary;
		background: #fff;
	}
	.cancel-Btn{
		border: solid 1rpx rgb(247, 137, 137);
		color: #fff;
		background: rgb(247, 137, 137);
	}
	::v-deep .uni-data-checklist .checklist-group .checklist-box .checklist-content .checklist-text{
		line-height: 36rpx;
	}
page {
  background-color: $uni-bg-color;
}

::v-deep .uni-data-checklist .checklist-group .checklist-box {
  width: 100%;
  line-height: 40rpx;
}

::v-deep .uni-data-checklist .checklist-group .checklist-box .checklist-content .checklist-text span {
  color: #999999;
}

.uni-easyinput {
  margin-top: -20rpx;
}

.uni-forms-item {
  margin-bottom: 20rpx !important;
}

.uni-checkbox-input:hover {
  border-color: $uni-color-primary;
}

.text-row {
  color: #999;
  font-size: 24rpx;
  text-align: center;
  margin-bottom: 20rpx;
}

// 开始认证btn
.startBtn {
  background-color: $uni-color-primary;
  color: #fff;
  font-size: 32rpx;
  // position: absolute;
  // bottom:100rpx;
  width: 92%;
  padding: 6rpx 0;
  margin-left: 4%;
}

.agree_jn {
  padding: 30rpx;
  position: relative;

  .show-inform {
    margin: 20rpx 0 20rpx 0;
    font-size: 28rpx;
    color: #c9c9c9;

    span {
      color: #c9c9c9;
      font-weight: 400;
    }
  }

  .uni-label-pointer {
    color: #999999;
    font-size: 24rpx;
    display: block;
  }

  ul {
    color: #999999;
    list-style-type: none;
    font-size: 26rpx;
    margin: 20rpx 10rpx 0;
    padding: 0;

    li {
      padding: 4rpx 0;
      text-align: left;

      .round {
        width: 14rpx;
        display: inline-block;
        height: 14rpx;
        margin-bottom: 4rpx;
        margin-right: 10rpx;
        border-radius: 50%;
        background: #c2c1bd;
      }
    }
  }
}
</style>
